<template>
    <mrc_ess_ParamTempDrawer :width="props.width" :scrim="props.scrim" :absolute="props.absolute" stepper
        ref="drawerRef" :addTitle="$t('title_new_question')" v-model:formType="formType" :stepperItems="stepperItems" @pre="handlePre"
        @next="handleNext" @del="handelDel" @confirm="handleConfirm">
        <template v-slot:0-content>
            <generalForm ref="fieldFormRef" :formType="formType"></generalForm>
        </template>
        <template v-slot:1-content>
            <common_RichTextForm ref="richTextRef1" :formType="formType"></common_RichTextForm>
        </template>
        <template v-slot:2-content>
            <common_RichTextForm ref="richTextRef2" :formType="formType"></common_RichTextForm>
        </template>
        <template v-slot:3-content>
            <competencyDataTable :formType="formType"></competencyDataTable>
        </template>
    </mrc_ess_ParamTempDrawer>
</template>

<script lang="ts" setup>
import common_RichTextForm from "@Components/common_RichTextForm/index.vue";
import competencyDataTable from "./competencyDataTable.vue";
import generalForm from "./generalForm.vue";

import { ref, onMounted, onUnmounted, nextTick, inject, watch, toRaw } from 'vue';
import { useCurrentInstance } from "@Hooks/index.ts";
const proxy = useCurrentInstance().proxy;

const props = defineProps({
    name: {
        type: String,
        default: ""
    },
    width: {
        type: [Number, String]
    },
    scrim: {
        type: [String, Boolean],
        default: "white"
    },
    absolute: {
        type: Boolean,
        default: false
    }
})

// 抽屉弹窗
const drawerRef = ref<any>(null);

const stepperItems = [{
    title: "title_general",
    label: "01",
    value: 0
}, {
    title: "title_guidelines",
    label: "02",
    value: 1
}, {
    title: "title_hints",
    label: "03",
    value: 2
}, {
    title: "title_competency",
    label: "04",
    value: 3
}]

// 当前表单类型
const formType = ref("add");

// 表单
const fieldFormRef = ref<any>(null);

// 富文本
const richTextRef1 = ref<any>(null);
const richTextRef2 = ref<any>(null);

/**
 * 设置表单数据
 */
 function setFormData(data: any = null) {
    fieldFormRef.value?.setFormData(data);
}

/**
 * 清除富文本内容
 */
function clearRichText() {
    richTextRef1.value?.clearRichText();
    richTextRef2.value?.clearRichText();
}

/**
 * 设置富文本内容
 */
function setRichTextData(target:number = 1, data: any = null) {
    target == 1 ? richTextRef1.value?.setRichTextData(data) : richTextRef2.value?.setRichTextData(data);
}

/**
 * 加载数据
 */
function loadData() {
    return new Promise((resolve, reject) => {
        drawerRef.value.showLoading();
        setTimeout(() => {
            drawerRef.value.hideLoading();
        }, 500)
        resolve(true);
    })
}

/**
 * 点击上一个
 */
function handlePre(e: any) {

}
/**
 * 点击下一个
 */
function handleNext(e: any) {

}
/**
 * 点击删除
 */
function handelDel(e: any) {
    e.showBtnLoading();
    drawerRef.value.triggerBtnDisabled(true);
    setTimeout(() => {
        e.hideBtnLoading();
        proxy.$successMsg("Done");
        e.close();
        drawerRef.value.close();
        // 通知表格更新
        proxy.$bus.emit("table-" + (props.name || proxy.$route.name), { method: "refresh" });
    }, 500)
}
/**
 * 点击确认
 */
async function handleConfirm(e: any) {
    e.showBtnLoading();
    setTimeout(() => {
        e.hideBtnLoading();
        proxy.$successMsg("Done");
        e.close();
        // 通知表格更新
        proxy.$bus.emit("table-" + (props.name || proxy.$route.name), { method: "refresh" });
    }, 500);
    // const {valid, errors} = await fieldFormRef.value.validate();
}

/**
 * 关闭对话框
 */
function close() {
    drawerRef.value.close();
}
/**
 * 显示对话框
 */
function open(data: any) {
    if (data.formType) {
        formType.value = data.formType;
    }
    drawerRef.value.open({
        type: formType.value
    });
    // 清空数据
    setFormData(null);
    clearRichText();
    // 加载数据
    loadData();
}
defineExpose({
    close,
    open,
})
</script>

<style scoped></style>